<!DOCTYPE html>
<html>
  <head>
    <title>Great Arc</title>
    <script type="text/javascript" src="../../d3.v2.js"></script>
    <style type="text/css">

#states path {
  fill: #ddd;
  stroke: #fff;
}

#arcs path {
  fill: none;
  stroke: #000;
  stroke-width: .5px;
  stroke-opacity: .2;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">

var width = 960,
    height = 500;

var projection = d3.geo.azimuthal()
    .origin([-115, 50])
    .scale(500);

var path = d3.geo.path()
    .projection(projection);

var arc = d3.geo.greatArc();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var states = svg.append("g")
    .attr("id", "states");

var arcs = svg.append("g")
    .attr("id", "arcs");

d3.json("../data/us-states.json", function(collection) {
  states.selectAll("path")
      .data(collection.features)
    .enter().append("path")
      .attr("d", path);
});

d3.json("../data/us-state-centroids.json", function(collection) {
  var links = [];

  // Create a link between each state centroid.
  collection.features.forEach(function(a) {
    collection.features.forEach(function(b) {
      if (a !== b) {
        links.push({
          source: a.geometry.coordinates,
          target: b.geometry.coordinates
        });
      }
    });
  });

  arcs.selectAll("path")
      .data(links)
    .enter().append("path")
      .attr("d", function(d) { return path(arc(d)); });
});

    </script>
  </body>
</html>
